<template>

    <section>
        <!-- 分类左边导航栏 -->
        <!-- 需求 -->
        <!-- 能够下滑，滑动不触发点击事件 -->
        <div id="sort-daohang" class="sort-daohang">
            <div id="sort-daohang-slipe" class="sort-daohang-slipe" @touchstart="daohangDown" @touchmove="daohangMove"
                @touchend="daohangUp" @click="selectSoet" :style="'margin-top:' +slipeTop +'px'">
                <p :class="{'is-selected' : (item.id === $store.state.sortList[0].id)}" :id="'daohang-p-id-' +item.id"
                    v-for="item in $store.state.sortList" :i="item.id">{{ item.title }}</p>
            </div>
        </div>

        <sortItem v-if="!doChange" :sortsId="sortsId"></sortItem>

    </section>
</template>

<script>
    import sortItem from '../subcomponents/sortItem.vue';


    export default {
        data() {
            return {
                move: {
                    newDot: 0,
                    oldDot: 0
                },
                slipeTop: 0,
                daohangSubHeight: 0,
                oldTargetId: null,
                sortsId: 1,
                doChange : false
            }
        },
        created() {

        },
        mounted() {
        },
        methods: {
           

            // 分类导航条滑动、点击事件
            daohangDown(e) {
                if (this.daohangSubHeight === 0) {
                    var slipeHeight = document.getElementById('sort-daohang-slipe').clientHeight;
                    var daohangHeight = document.getElementById('sort-daohang').clientHeight;
                    this.daohangSubHeight = slipeHeight - daohangHeight;
                }
                this.move.oldDot = e.touches[0].pageY;
            },
            daohangMove(e) {
                if (this.move.newDot === 0) {
                    this.move.newDot = e.touches[0].pageY;
                }
                if (this.slipeTop <= 50 && this.slipeTop >= -(this.daohangSubHeight + 50)) {
                    this.slipeTop = this.slipeTop + (e.touches[0].pageY - this.move.newDot);
                    this.move.newDot = e.touches[0].pageY;
                }
            },
            daohangUp(e) {
                if (this.slipeTop >= 0) {
                    this.slipeTop = 0;
                } else if (this.slipeTop <= -this.daohangSubHeight) {
                    this.slipeTop = -this.daohangSubHeight;
                }

                if (Math.abs(this.move.newDot - this.move.oldDot) <= 40) {
                    this.selectSoet(e);
                }

                this.move.newDot = 0;
            },
            selectSoet(e) {
                if (this.oldTargetId == null) {
                    this.oldTargetId = 'daohang-p-id-' + this.$store.state.sortList[0].id;
                }
                var lodTarget = document.getElementById(this.oldTargetId);
                lodTarget.className = '';
                var target = document.getElementById(e.target.id);
                target.className = 'is-selected';

                this.sortsId = target.getAttribute('i');
                this.oldTargetId = e.target.id;
                target = null;
            }
        },

        components: {
            sortItem
        }
    }
</script>


<style lang="scss" scoped>
    section {
        border-bottom: 60px;
        display: flex;
    }


    .sort-daohang {
        width: 30%;
        overflow: hidden;
        height: 548px;


        .sort-daohang-slipe {
            transition: all 0.1s;
        }

        p {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            padding-left: 20px;
            color: #000000;
            margin: 0;
            position: relative;
        }

        .is-selected {
            background: #ffffff;
            color: #ff0000;
            font-weight: bold;
        }

    }
</style>